<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-3.1.0.js"></script>
<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
<style>
	body {

    position: relative;
    font-family: Arial,Helvetica, sans-serif,"宋体","黑体";
}
#wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.open-left {
    position: fixed;
    left: 176px;
    top: 80px;
    width: 28px;
    height: 31px;
    z-index: 999;
}
img, th, embed {
    border: none;
    color: #666;
}
.topbar {
    -webkit-box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2);
    background: #ffffff;
    box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2);
    left: 0px;
    position: fixed;
    right: 0;
    top: 0px;
    z-index: 1;
}
.topbar .topbar-left {
    /* background: #253841; */
    float: left;
    height: 70px;
    position: relative;
    width: 270px;
    z-index: 1;
}
.text-center {
    text-align: center;
}
.logo {
    color: #ffffff !important;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 55px;
    text-transform: uppercase;
}
.m-t-5 {
    margin-top: 5px !important;
}
.m-r-10 {
    margin-right: 10px;
}
.banb {
    position: absolute;
    color: #fff;
    top: 40px;
    left: 100px;
    font-size: 15px;
    width: 134px;
    text-align: center;
}
.navbar-default {
    background-color: #2b4049;
    border-radius: 0px;
    border: none;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin-bottom: 0px;
}
.container {
    width: auto;
}
.pull-left {
    float: left!important;
}
.m-l-20 {
    margin-left: 20px;
}
.newsxh .swiper-container {
    float: left;
    width: 280px;
    height: 70px;
}
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
pagination-bullet {
    margin: 5px 0;
    display: block;
}
.newsxh .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.9;
}
.navbar-nav {
    margin: 0px;
}

.navbar-nav>li {
    float: left;
}
.nav>li {
    position: relative;
    display: block;
}
.navbar-nav > li.dropdown > a {
    text-align: center;
    padding: 0 25px;
}
.navbar-default .navbar-nav>li>a {
    color: #777;
}
.nav > li > a {
    color: #fff !important;
    line-height: 70px;
    padding: 0px 15px;
    position: relative;
    font-size: 14px;
}
.nav > li > a i.iconfont {
    font-size: 24px !important;
    line-height: 24px;
}
.icon_text {
    margin-top: -24px;
    font-size: 14px !important;
    line-height: 16px;
    height: 24px;
}

.clear {
    display: block;
    clear: both;
}
body.fixed-left .side-menu.left {
    bottom: 50px;
    height: 100%;
    margin-bottom: -70px;
    margin-top: 0px;
    padding-bottom: 70px;
    position: fixed;
}
.side-menu.left {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 70px;
}
.side-menu {
    bottom: 0;
    top: 0;
    width: 190px;
    z-index: 2;
}
.left {
    float: left;
}
#sidebar-menu {
    background-color: #ffffff;
    padding-bottom: 50px;
    width: 100%;
    font-size: 16px;
}

#sidebar-menu ul, #sidebar-menu li, #sidebar-menu a {
    border: 0;
    font-weight: normal;
    line-height: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
}

#sidebar-menu > ul > li:first-child > a {
    padding: 19.5px 25px;
}
#sidebar-menu > ul > li > a {
    color: #444444;
    display: block;
    padding: 15px 25px;
    font-size: 15px;
}
#sidebar-menu a {
    line-height: 1.3;
}
#sidebar-menu > ul > li > a > i {
    display: inline-block;
    font-size: 20px;
    line-height: 17px;
    margin-left: 3px;
    margin-right: 15px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    color: #2c404b;
}
a.bgbj i {
    color: #fff !important;
}
#sidebar-menu > ul > li > a > span {
    vertical-align: middle;
    font-size: 15px;
}
a.bgbj {
    background: #ffaf24;
    color: #fff !important;
}



#sidebar-menu a {
    line-height: 1.3;
}
#sidebar-menu > ul > li > a > i {
    display: inline-block;
    font-size: 20px;
    line-height: 17px;
    margin-left: 3px;
    margin-right: 15px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    color: #2c404b;
}

#sidebar-menu > ul > li > a > i {
    display: inline-block;
    font-size: 20px;
    line-height: 17px;
    margin-left: 3px;
    margin-right: 15px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    color: #2c404b;
}



#sidebar-menu > ul > li > a {
    color: #444444;
    display: block;
    padding: 15px 25px;
    font-size: 15px;
}
#sidebar-menu a {
    line-height: 1.3;
}

#sidebar-menu > ul > li > a > em {
    float: right;
    font-size: 20px;
}
em, i {
    font-style: normal;
}
#sidebar-menu li {
    border-bottom: 1px solid #e5e5e5;
}
#sidebar-menu ul, #sidebar-menu li, #sidebar-menu a {
    border: 0;
    font-weight: normal;
    line-height: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
}
#sidebar-menu ul ul a {
    color: #aaaaaa;
    font-size: 14px;
    display: block;
    padding: 10px 25px 10px 50px;
}
a {
    cursor: pointer;
}
.navbar-nav {
    margin: 0px;
}
.pull-right {
    float: right!important;
}
@media (min-width: 768px)
.navbar-nav>li {
    float: left;
}
.nav>li {
    position: relative;
    display: block;
}
navbar-nav > li.dropdown > a {
    text-align: center;
    padding: 0 25px;
}
.navbar-default .navbar-nav>li>a {
    color: #777;
}
.nav > li > a {
    color: #fff !important;
    line-height: 70px;
    padding: 0px 15px;
    position: relative;
    font-size: 14px;
}
.nav > li > a i.iconfont {
    font-size: 24px !important;
    line-height: 24px;
}
.icon_text {
    margin-top: -24px;
    font-size: 14px !important;
    line-height: 16px;
    height: 24px;
}
</style>

<script type="text/javascript">
$(function(){
	$("#kehu").click(function(){
		if($("#kehu1").css("display")=="none"){
			$("#kehu1").css("display","block");
		}else{
			$("#kehu1").css("display","none");
		}
	});
	
	$("#shouqian").click(function(){
		if($("#shouqian1").css("display")=="none"){
			$("#shouqian1").css("display","block");
		}else{
			$("#shouqian1").css("display","none");
		}
	});
	$("#shouzhong").click(function(){
		if($("#shouzhong1").css("display")=="none"){
			$("#shouzhong1").css("display","block");
		}else{
			$("#shouzhong1").css("display","none");
		}
	});
	$("#canping").click(function(){
		if($("#canping1").css("display")=="none"){
			$("#canping1").css("display","block");
		}else{
			$("#canping1").css("display","none");
		}
	});
	$("#souhou").click(function(){
		
		if($("#kehu").css("display")=="none"){
			$("#kehu").css("display","block");
		}else{
			$("#kehu").css("display","none");
		}
		if($("#shouqian").css("display")=="none"){
			$("#shouqian").css("display","block");
		}else{
			$("#shouqian").css("display","none");
		}
		
		
		if($("#souhou1").css("display")=="none"){
			$("#souhou1").css("display","block");
		}else{
			$("#souhou1").css("display","none");
		}
	});
	$("li.has_sub").hover(function(){
		$(this).css({"background": "yellow"});
		$("ul.list-unstyled").css({"background": "#fff"});
	},function(){
		$(this).css({"background": "#fff"});	
	});
	
	$("li.has_sub").hover(function(){
		$(this).css({"background": "yellow"});
		$("ul.list-unstyled").css({"background": "#fff"});
	},function(){
		$(this).css({"background": "#fff"});	
	});
	
	$(function(){
		$("#xiaoshoujihui").click(function(){
			$('#main').load('sa');
		})
	});
	$(function(){
		$("#xuqiu").click(function(){
			$('#main').load('xuqiu');
		})
	});
	
});


</script>
</head>
<body class="fixed-left widescreen">
<!-- 最外层的div -->
<div id="wrapper">
<!-- 一个小点 -->
<div class="open-left">
<img src="../imgs/hdjimgs/open-left.png">
</div>
<!-- 一个小点 -->
<div style="background-color:#2b4049;" class="topbar">
            <!-- LOGO -->
            <div class="topbar-left dw">
                <div class="text-center">
                    <a href="#" class="logo client">
                        <img id="dlogo" src="../imgs/hdjimgs/logo4.png" width="280" height="60" class="m-r-10 m-t-5" /></a>
                    <div class="banb" id="visionVal"></div>
                </div>
                
               
                
            </div>
            <div style="float: right;" class="topbar-left dw">
                <div style="margin-right: 20px;">
                     <a href="#" class="logo client">
                        <img style="height: 60px;" id="dlogo" src="../imgs/hdjimgs/20181225151521.png"  class="m-r-10 m-t-5" />
                         <img style="height: 60px;" id="dlogo" src="../imgs/hdjimgs/20181225151316.png"  class="m-r-10 m-t-5" />
                         <img style="height: 60px;margin-right: 20px;" id="dlogo" src="../imgs/hdjimgs/20181225150903.png"  class="m-r-10 m-t-5" />
                       <!--  <img style="width: 40px;height: 40px;border: 2px solid #edf0f0;" id="dlogo" src="../imgs/hdjimgs/usr-avatar.png" width="280" height="60" class="m-r-10 m-t-5" /> -->
                        <i class="clear icon_text"></i>
                        </a> 
                       <a href="#" style="float: right;" class="logo client">
                       
                        <i class="clear icon_text"></i>
                        </a> 
                        
                    <div class="banb" id="visionVal"></div>
                </div>
                
               
                
            </div>
</div>

 <!-- Button mobile view to collapse sidebar menu -->
            <div class="navbar navbar-default" role="navigation">
                <div class="container">
                    <div>
                        <div class="pull-left">
                            <div class="newsxh m-l-20">
                                <div class="swiper-container">
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                   
                    
                    
                </div>
            </div>
            
            
            
            
        </div>
        <!-- aa -->
        <div>
        <!-- Top Bar End -->
		<div class="left side-menu" style="float:left;width:13%">
		<div class="slimScrollDiv"  >
			<div class="sidebar-inner slimscrollleft">
				<div id="sidebar-menu">
					<ul>
					<li sytle=" border-bottom: 1px solid #e5e5e5;">
					<a href="#" class="waves-effect waves-light bgbj client">
					<i class="iconfont icon-zhuye"><img src="../imgs/hdjimgs/20181225132538.png" "></i>
					<span>主页 </span>
					</a>
					</li>
					
					<li class="has_sub"  style="border-bottom: 1px solid #e5e5e5;">
					<a class="waves-effect waves-light" id="kehu">
					<i class="iconfont icon-shouyin-copy"><img src="../imgs/hdjimgs/20181225132844.png" ></i>
					<span>客户模块 </span>
					<em>+</em>
					</a>
					
					<ul class="list-unstyled bgbj" style="display: none;" id="kehu1">
					<li>
					<a>● 全部客户</a>
					</li>
					<li>
					<a>● 客户导入</a>
					</li>
					<li>
					<a>● 客户合并</a>
					</li>
					</ul>
					
					
					</li>
				
					<li style="border-bottom: 1px solid #e5e5e5;" class="has_sub">
					<a class="waves-effect waves-light" id="shouqian">
					<i class="iconfont icon-shouyin-copy"><img src="../imgs/hdjimgs/20181225132731.png" ></i>
					<span>销前模块 </span>
					<em>+</em>
					</a>
					
					<ul class="list-unstyled bgbj" style="display: none;" id="shouqian1">
					<li id="xiaoshoujihui">
					<a>● 销售机会</a>
					</li>
					<li>
					<a>● 销售漏斗</a>
					</li>
					<li>
					<a id="xuqiu">● 客户需求</a>
					</li>
					<li>
					<a>● 解决方案</a>
					</li>
					<li>
					<a>● 竞争对手</a>
					</li>
					</ul>
					
					</li><li style="border-bottom: 1px solid #e5e5e5;" class="has_sub">
					<a class="waves-effect waves-light" id="shouzhong">
					<i class="iconfont icon-shouyin-copy"><img src="../imgs/hdjimgs/20181225133142.png" ></i>
					<span>销中模块 </span>
					<em>+</em>
					</a>
					
					<ul class="list-unstyled bgbj" style="display: none;" id="shouzhong1">
					<li>
					<a>● 合同订单</a>
					</li>
					<li>
					<a>● 交付计划</a>
					</li>
					<li>
					<a>● 交付记录</a>
					</li>
					<li>
					<a>● 订单退货</a>
					</li>
					<li>
					<a>● 退货明细</a>
					</li>
					</ul>
					
					
					</li>
					<li style="border-bottom: 1px solid #e5e5e5;" class="has_sub">
					<a class="waves-effect waves-light" id="canping">
					<i class="iconfont icon-shouyin-copy">
					<img src="../imgs/hdjimgs/20181225133451.png" >
					</i>
					<span>产品模块 </span>
					<em>+</em>
					</a>
					
					<ul class="list-unstyled bgbj" style="display: none;" id="canping1">
					<li>
					<a>● 产品</a>
					</li>
					<li>
					<a>● 产品管理权限</a>
					</li>
					<li>
					<a>● 产品分类维护</a>
					</li>
					<li>
					<a>● 产品导入</a>
					</li>
					
					</ul>
					
					</li>
					<li style="border-bottom: 1px solid #e5e5e5;" class="has_sub">
					<a class="waves-effect waves-light" id="souhou"> 
					<i class="iconfont icon-shouyin-copy"><img src="../imgs/hdjimgs/20181225133645.png" ></i>
					<span>销后模块 </span>
					<em>+</em>
					</a>
					
					<ul class="list-unstyled bgbj" style="display: none;" id="souhou1">
					<li>
					<a>● 维修总控台</a>
					</li>
					<li>
					<a>● 维修工单</a>
					</li>
					<li>
					<a>● 接见状况定义</a>
					</li>
					<li>
					<a>● 投诉</a>
					</li>
					
					</ul>
					
					</li>
					<li style="border-bottom: 1px solid #e5e5e5;" class="has_sub">
					<a class="waves-effect waves-light">
					<i class="iconfont icon-shouyin-copy"><img src="../imgs/hdjimgs/20181225133604.png" ></i>
					<span>统计模块 </span>
					<em>+</em>
					</a>
					</li>
				
					</ul>			
				</div>
			
			</div>	
		
		</div>
		</div>
	

<div style="float: right; width:85%">

<html>
<body>
<div id="main" style="height:1000px;width: :85%;border:solid 1px red; ">
<!-- <div style="width::85%;height:100px;border:solid 1px red; ">
</div> -->

</div>
</body>
</html>

</div>
</div>
<!-- 最外层的div -->


</body>
</html>